<div>
    <x-header>
        @include('partials.category')
    </x-header>

    @if($collection->isEmpty())
        <div class="py-4 text-sm text-center text-neutral-400 leading-relaxed">
            <p class="mb-4">
                <img src="{{ asset('img/oops.png') }}" alt="oops" width="180" class="mx-auto">
            </p>
            <p>很抱歉，没有找到匹配数据．<br> 去看看其他的吧！</p>
            <a href="{{ route('welcome') }}" class="bg-gradient-to-r from-red-500 to-[red] p-2 leading-10 text-white px-10 rounded-full">
                回到首页
            </a>
        </div>
    @else
        <div class="grid grid-cols-2 gap-2 px-2 text-sm py-4">
            @foreach($collection as $v)
                <a wire:navigate class="text-center relative" href="{{ $v->presenter()->show }}">
                    <img class="w-full aspect-square object-cover object-center rounded" src="{{ file_url($v->picture) }}" alt="{{ $v->title }}">

                    <p class="absolute inset-0 flex justify-center items-center">
                        <span class="p-2 truncate text-lg text-white font-bold shadow">{{ $v->title }}</span>
                    </p>
                </a>
            @endforeach
        </div>

        @includeWhen($hasMorePages, 'partials.load-more')
    @endif
</div>
